<template>
	<view>
		
		<view>
			<header-navback></header-navback>
			<add-sel-bg ref="add_sel_bg" from="daka" ></add-sel-bg>
		</view>
		<view class="userinfo">
			<view class="top-user flex align-center" >
				<view class="left">
					<view class="headimg">
						<!-- #ifdef MP-WEIXIN -->
						<open-data type="userAvatarUrl" v-if="userInfo.avatar == ''"></open-data>
						<image class="headimg" v-else :src="userInfo.avatar?userInfo.avatar:'/static/images/member/default_headimg.jpg'"></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<image class="headimg" :src="userInfo.avatar?userInfo.avatar:'/static/images/member/default_headimg.jpg'"></image>
						<!-- #endif -->
					</view>
				</view>
				<view class="right" >
					<view class="nickname">
						<!-- #ifdef MP-WEIXIN -->
						<open-data type="userNickName" v-if="userInfo.nickname == ''" ></open-data>
						<text v-else>{{userInfo.nickname?userInfo.nickname:'用户昵称'}}</text>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						{{userInfo.nickname}}
						<!-- #endif -->
					</view>
				</view>
				<view class="right2 flex align-center"  >
					<view  @tap.stop="inputMobile" :class="(temp_id>0)?'':'no-share'" >
						<text class="iconfont mobile">&#xe60c;</text>
					</view>
					<view class="iconbg-detail"  @tap.stop="shareFunc()" v-if="temp_id > 0">
						<text class="iconfont icon-fenxiang" ></text>
						<text class="yqcj">邀请使用</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content" >
			<view class="title">
				<input type="text" v-model="title" class="in-title" placeholder="请输入标题(必填)">
			</view>
			
		</view>
		<view class="add-button">
			<add-sel-button ref="add_sel_button"></add-sel-button>
		</view>
		<view class="need-form">
			<view class="form-title">设置填写项<!-- <text class="yulan" @tap="previewForm">预览填写效果</text> --></view>
			<view class="diy-form">
				<show-form ref="show_form" :addCheckTop="160" :itemList="formData" @change="selFormDataChange"></show-form> 
			</view>
			<view class="add-tip" @tap="showSelForm">+添加填写项</view>
		</view>
		<view class="need-form">
			<view class="form-title">打卡设置</view>
			<view class="time">
				<view class="time-title">参加时间<text class="text-red ">(默认为从发布时间开始，30天后结束)</text></view>
				<view class="flex align-center sel-time-p">
					<view class="sel-time" @tap="DatePicker('datetime','start_time')">{{mxDatePicker.start_time?mxDatePicker.start_time:'请选择开始时间'}}</view>
					<view class="and">~</view>
					<view class="sel-time" @tap="DatePicker('datetime','end_time')">{{mxDatePicker.end_time?mxDatePicker.end_time:'请选择结束时间'}}</view>
				</view>
			</view>
			
			<view class="time-chongfu flex align-center">
				<view class="circle-title">打卡类型</view>
				<picker class="circle-name"  @change="sTypeIndexChange"  :range="setObj.s_type.arr" range-key="title" >
										<view class="uni-input">{{setObj.s_type.arr[setObj.s_type.index].title}}</view>
									</picker>
				<text class="iconfont icon-youjiantou"></text>
			</view>
			<view class="time-chongfu flex align-center" style="display: none;">
				<view class="time-title">打卡提醒<text class="iconfont icon-wenhao" @tap="showTips('tx_tip')"></text></view>
				<switch @change="switchChange" data-key="txStatus"  :checked="txStatus == 1" style="zoom:.9" />
			</view>
			<view class="time" v-if="txStatus == 1 || setObj.s_type.index == 1 || setObj.s_type.index == 2">
				<view class="time-title">{{setObj.weekdata.titleArr[setObj.weekdata.titleIndex]}}</view>
				<view class="daka-day flex align-center flex-warp">
					<checkbox-group @change="selWeek" v-if="resetCheckbox == true">
						<label class="daka-day-label" v-for="(item,index) in setObj.weekdata.arr" :key="item.value">
							<checkbox class="daka-day-checkbox" :value="item.id" :checked="(setObj.weekdata.index.indexOf(item.id) > -1)?true:false" /><text>{{item.title}}</text>
						</label>
						
					</checkbox-group>
				</view>
			</view>
			<view class="time-chongfu flex align-center" v-if="txStatus == 1" style="display: none;">
				<view class="circle-title">打卡提醒时间<text class="iconfont icon-wenhao" @tap="showTips('tx_time_type_tip')"></text></view>
				<view class="circle-name">
					<view class="uni-input"  @tap="DatePicker('time','tx_time')">{{mxDatePicker.tx_time}}</view>
				</view>
				<text class="iconfont icon-youjiantou"></text>
			</view>
			
			<view class="time-chongfu flex align-center">
				<view  class="circle-title">打卡时间段<text class="iconfont icon-wenhao" @tap="showTips('tx_time')"></text></view>
				<view >
					<view class="shijianduan"  @tap="DatePicker('time','dk_start_time')">{{mxDatePicker.dk_start_time}}</view>
					
				</view>
				<view class="shijian-zhi">至</view>
				<view >
					<view class="shijianduan"  @tap="DatePicker('time','dk_end_time')">{{mxDatePicker.dk_end_time}}</view>
				</view>
			</view>
			
			
			
			
			<view class="time-chongfu flex align-center">
				<view class="time-title">允许补卡<text class="iconfont icon-wenhao" @tap="showTips('allow_bk_tip')"></text></view>
				<switch @change="switchChange" data-key="canBk"  :checked="canBk == 1" style="zoom:.9" />
			</view>
			<view class="time-chongfu flex align-center">
				<view class="time-title">默认填写上次内容<text class="iconfont icon-wenhao" @tap="showTips('input_last_tip')"></text></view>
				<switch @change="switchChange" data-key="inputLast"   :checked="inputLast == 1" style="zoom:.9" />
			</view>
			<view class="time-chongfu flex align-center">
				<view class="time-title">允许重复参加</view>
				<switch @change="switchChange" data-key="againMore"   :checked="againMore == 1" style="zoom:.9" />
			</view>
		</view>
		<view class="need-form">
			<view class="form-title">圈子设置</view>
			<view class="time-chongfu flex align-center">
				<view class="time-title">推送到圈子</view>
				<switch @tap="pushCircleChange" :disabled="true"   :checked="pushCircleStatus == 1" style="zoom:.9" />
			</view>
			<view class="time-chongfu flex align-center" v-if="pushCircleStatus == 1">
				<view class="circle-title">选择圈子</view>
				<picker class="circle-name"  @change="bindPickerChange" :value="push_circle_index" :range="pushCircleList" range-key="name" >
										<view class="uni-input">{{pushCircleList[push_circle_index].name}}</view>
									</picker>
				<text class="iconfont icon-youjiantou"></text>
				
			</view>
		</view>
		<view class="need-form">
			<view class="form-title">隐私设置</view>
			<view class="time-chongfu flex align-center">
				<view class="circle-title">参加记录</view>
				<picker class="circle-name"  @change="joinRuleChange" :value="joinRuleListIndex" :range="joinRuleList" range-key="title" >
										<view class="uni-input">{{joinRuleList[joinRuleListIndex].title}}</view>
									</picker>
				<text class="iconfont icon-youjiantou"></text>
			</view>
		</view>
		
		<view class="sub-button-list flex align-center">
			<view class="list-item list-item1 flex align-center" @tap="previewForm">
				<view class="sub-button yulan">预览效果</view>
			</view>
			<view class="list-item list-item2 flex align-center">
				<view class="sub-button fabu" @tap="submit">立即发布</view>
			</view>
		</view>
		<view class="zhanwei"></view>
		<view>
			<sel-form ref="sel_form" @selectType="selFormData"></sel-form>
		</view>
		<mx-date-picker :show="mxDatePicker.showPicker" :type="mxDatePicker.type" :showSeconds="false" :value="mxDatePicker.value" :show-tips="true"
		:show-seconds="true" @confirm="DatePickerEnd" @cancel="DatePickerEnd" />
		<share-wechat ref="share_wechat" :addCheckTop="450" ></share-wechat>
		<wechat-login ref="wechat_login"  @callback="wechatRegister"></wechat-login>
	</view>
</template>

<script src="./add.js"></script>

<style lang="scss">
	
	.sub-button-list{
		margin-top: 100rpx;
		.list-item{
			height: 100rpx;
			text-align: center;
			line-height: 80rpx;
		}
		.list-item1{
			width:40% ;
		}
		.list-item2{
			width:60% ;
		}
		.sub-button{
			letter-spacing: 2rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
		}
		.yulan{
			width: 80%;
			border: 2rpx solid $uni-btn-color;
			background: #ffffff;
			height: 80rpx;
			margin: 0 10%;
			color: $uni-btn-color;
		}
		.fabu{
			width: 97%;
			background: $uni-btn-color;
			margin-right: 3%;
			color:#FFFFFF;
		}
	}
	.text-red{
		font-size: 26rpx;
	}
	.need-form{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.time-chongfu{
			padding: 0 20rpx;
			height: 80rpx;
			.shijian-zhi{
				margin: 0 10rpx;
			}
			.shijianduan{
				height: 50rpx;
				width: 160rpx;
				background: #F4F3F4;
				color: #445978;
				padding: 0 10rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 50rpx;
			}
			.circle-title{
				width: 300rpx;
			}
			.time-title{
				width: 90%;
				
			}
			.circle-name{
				width: 77%;
				text-align: right;
				height: 100%;
				overflow: hidden;
				color: #666666;
				line-height: 81rpx;
				font-size: 26rpx;
			}
			.iconfont{
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}
		.time{
			padding: 0 20rpx;
			width: 100%;
			.time-title{
				height: 50rpx;
			}
			.daka-day{
				.daka-day-label{
					width: 25%;
					display: inline-block;
					padding: 8rpx 0;
					.daka-day-checkbox{
						transform:scale(0.7)
					}
				}
			}
			.sel-time-p{
				height: 80rpx;
				.sel-time{
					height: 60rpx;
					width: 650rpx;
					background: #F4F3F4;
					color: #445978;
					padding: 0 10rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 60rpx;
				}
				.and{
					height: 60rpx;
					width: 180rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
			
		}
		.form-title{
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 80rpx;
			padding-left: 20rpx;
			.yulan{
				float: right;
				margin-right: 40rpx;
				font-size: 24rpx;
				background: #728DB5;
				height: 50rpx;
				line-height: 50rpx;
				width: 180rpx;
				color: #ffffff;
				font-weight: normal;
				text-align: center;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
		}
		.add-tip{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #6CA1D0;
		}
	}
	.content{
		margin-top: 100rpx;
		background: #ffffff;
		padding: 10rpx;
		
		.title{
			height: 80rpx;
			border-bottom: 2rpx solid #eee;
			.in-title{
				height: 100%;
				line-height: 80rpx;
				padding-left: 10rpx;
				font-size: 34rpx;
			}
		}
	}
	.userinfo{
		width: 100%;
		height: 120rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 440rpx;
		background: #fff;
		padding: 0 10rpx;
		.top-user{
			height: 120rpx;
			.right2{
				height: 100%;
				width: 220rpx;
				.no-share{
					margin-left: auto;
					margin-right: 20rpx;
				}
				.iconbg-detail{
					width: 170rpx;
					height: 50rpx;
					color: #ffffff;
					background: $uni-btn-color;
					border-radius: 50rpx;
					text-align: center;
					line-height: 50rpx;
					//float: right;
					margin: 0 0 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.yqcj{
						font-size: 24rpx;
					}
				}
				.mobile{
					font-size: 50rpx;
					color: $uni-btn-color;
				}
			}
			.right{
				height:100%;
				width: 436rpx;
				.nickname{
					ont-size: 32rpx;
					height: 120rpx;
					color: #777777;
					overflow: hidden;
					display: flex;
					align-items: center;
					    padding: 10rpx 10rpx 0 0;
				}
			}
			.left{
				.headimg{
					 overflow: hidden;
					 display: block;
					 margin: 0rpx;
					 margin-right: 10rpx;
					 border-radius: 20rpx;
					 border: 2rpx solid #fff;
					 width: 100rpx;
					 height: 100rpx;
				}
			}
		}
	}
	
</style>
